<template>
  <div>
    <van-popup v-model:show="isShowMap" position="bottom" :style="{ height: '90%' }">
      <div class="relative w-full h-1/2" id="container" ref="mapRef">
        <div class="absolute z-10 left-4 top-4" @click="isShowMap = false">取消</div>
        <div class="absolute right-4 top-4 z-10 text-[#1989fa]" @click="confirmPoint">确认</div>
        <div
          class="absolute bottom-10 left-4 z-10 flex items-center justify-center rounded-md bg-white h-8 w-8"
          @click="reposition"
        >
          <svg-icon name="reposition" class="!w-6 !h-6"></svg-icon>
        </div>
      </div>
      <div class="box-border w-full p-2 overflow-y-auto text-xs h-1/2" ref="resultRef">
        <div
          v-for="(item, index) in addressList"
          :key="index"
          class="box-border relative w-full p-4 px-8 truncate"
          :class="{ ' bg-zinc-400/50': item === mapAddress }"
          @click="chooseAddress(item)"
        >
          <span>{{ item }}</span>
          <div class="absolute right-2 top-4" v-if="item === mapAddress">
            <van-icon name="success" color="#1989fa" size="1.2rem" />
          </div>
        </div>
        <div v-if="mapAddress === undefined" class="box-border w-full p-4 px-8 truncate">
          <van-form required="auto">
            <van-field
              v-model="handAddress"
              label="地址："
              placeholder="无法定位当前位置，请手动输入当前位置"
              rows="1"
              autosize
              type="textarea"
              :rules="[{ required: true, message: '必须输入地址！' }]"
          /></van-form>
        </div>
      </div>
    </van-popup>
    <van-field
      v-model="modelAddress"
      right-icon="arrow"
      label="地址："
      label-align=""
      autosize
      rows="1"
      type="textarea"
      :readonly="true"
      placeholder="自动定位地址"
      class="m-b-32 border-radius-22 min-height-100"
      :rules="[{ required: true, message: '必须选择地址！' }]"
      @click="isShowMap = true"
    />
  </div>
</template>

<script setup>
import fireIcon from '@/assets/images/fire.png'
// 表单地址双向绑定
const modelAddress = defineModel('address')
// 表单经度双向绑定
const modelLongitude = defineModel('longitude')
// 表单纬度双向绑定
const modelLatitude = defineModel('latitude')
// 当前的经纬度
const curPos = ref({
  longitude: '',
  latitude: ''
})
// 调用地图定位api获得当前手机的经纬度
const getLocation = (map) => {
  ww.getLocation({
    type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
    success: function (res) {
      console.log(res)
      var latitude = res.latitude // 纬度，浮点数，范围为90 ~ -90
      var longitude = res.longitude // 经度，浮点数，范围为180 ~ -180。
      var speed = res.speed // 速度，以米/每秒计
      var accuracy = res.accuracy // 位置精度
      map.setCenter([longitude, latitude])
      marker.setPosition(map.getCenter())
      curPos.value.longitude = map.getCenter().lng
      curPos.value.latitude = map.getCenter().lat
    },
    fail: function (res) {
      showNotify({ type: 'danger', message: '无法定位到当前位置！' })
      console.log(res)
    }
  })
}

// 是否打开popup地图弹框
const isShowMap = ref(false)
// 地图容器
const mapRef = ref(null)
// 周边地址容器
const resultRef = ref(null)
// 点击地图弹框中的某一地址
const mapAddress = ref('')
// 手动输入的地址
const handAddress = ref('')
// 获取到当前位置的周边地址
const addressList = ref([])

// 选择地址
const chooseAddress = (item) => {
  mapAddress.value = item
}

// 确认选择的地址
const confirmPoint = () => {
  // 选择地址还是手动输入地址，都要把经纬度给到后端
  modelLongitude.value = curPos.value.longitude
  console.log(modelLongitude.value)
  modelLatitude.value = curPos.value.latitude
  if (mapAddress.value) {
    isShowMap.value = false
    modelAddress.value = mapAddress.value
  } else {
    // 没有周边地址的话，就手动输入
    if (handAddress.value) {
      // 必须手动输入地址才能有效！
      isShowMap.value = false
      modelAddress.value = handAddress.value
    } else {
      showFailToast('无法定位当前位置，请手动输入位置！')
    }
  }
}

// 地图实例
let map

// 重新定位到当前位置
const reposition = () => {
  getLocation(map)
}

// 监听到map容器出现之后，初始化地图
watch(mapRef, (newVal) => {
  if (newVal) {
    console.log(modelLongitude.value)
    console.log(modelLatitude.value)

    map = new AMap.Map('container', {
      zoom: 50,
      // resizeEnable: true //是否监控地图容器尺寸变化
      // zoom: 100 //初始化地图层级
      //center: [116.397428, 39.90923] //初始化地图中心点
      // dragEnable: false
    })


    // 在图面添加工具条控件, 工具条控件只有缩放功能
    map.addControl(new AMap.ToolBar())

    var geocoder = new AMap.Geocoder({
      batch: true,
      extensions: 'all',
      radius: 100 //范围，默认：500
    })


    // 实例化点标记
    function addMarker() {
      let marker = new AMap.Marker({
        position: map.getCenter(),
        anchor: 'bottom-center',
      })
      console.log(map.getCenter())
      marker.setMap(map)
      return marker
    }
    // 地图上添加点标记
    let marker = addMarker()
    console.log(modelLongitude.value)
    // 编辑的时候会有经纬度,此时将地图中心定位到默认的经纬度中心处
    if (modelLongitude.value && modelLatitude.value) {
      map.setCenter([modelLongitude.value, modelLatitude.value])
      marker.setPosition(map.getCenter())
      curPos.value.longitude = map.getCenter().lng
      curPos.value.latitude = map.getCenter().lat
    } else {
      getLocation(map)
    }

    // 每次移动地图，更改点标记的位置
    map.on('mapmove', (evt) => {
      console.log('触发地图平移时的事件')
      marker.setPosition(map.getCenter())
    })

    // 结束移动地图后，记录当前经纬度，并重新请求当前位置的周边位置（使用map.setCenter也会触发该事件）
    map.on('moveend', (evt) => {
      curPos.value.longitude = map.getCenter().lng
      curPos.value.latitude = map.getCenter().lat
      geocoder.getAddress(map.getCenter(), function (status, result) {
        if (status === 'complete' && result.regeocode) {
          var addressComponent = result.regeocode.addressComponent
          var front = addressComponent.province + addressComponent.city + addressComponent.district
          var addressArr = new Set()
          result.regeocode.pois.forEach((poi, index) => {
            addressArr.add(front + poi.address + poi.name)
          })
          addressList.value = [...addressArr]
          mapAddress.value = addressList.value[0]
          // 如果有地址，但是没有周边地址那么就把地址赋给手写地址
          if (modelAddress.value && !mapAddress.value) {
            handAddress.value = modelAddress.value
          }
          resultRef.value.scrollTo({ top: 0, behavior: 'smooth' })
        } else {
          console.log(status + '-' + result)
          addLog('根据经纬度查询地址失败')
        }
      })
    })
  }
})
</script>

<style lang="scss" scoped></style>
